<template>
  <div class="personal">
       <Header title="个人中心" background="#fff"/>
       <van-cell-group>
         <van-cell title="头像" class="avtar" @click="show=true"> 
          <van-icon name="arrow" /> 
          <div class="van-images"><van-image :src="require('../../assets/img/info2.png')" /></div>
        </van-cell>
          <van-field v-model="name" @click="$router.push({name: 'newNickname'})" label="昵称" placeholder="" readonly  right-icon="arrow"></van-field>
          <van-field v-model="value2" @click="$router.push({name: 'signName'})" label="个性签名" placeholder="" readonly right-icon="arrow"></van-field>
      </van-cell-group>
        <van-action-sheet class="fanModel" v-model="show" :actions="actions" cancel-text="取消" round @cancel="toCancel" @select="onSelect" />
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'personal',
  computed: { ...mapGetters({ pageData: 'pageData'}) },
  data () {
    return {
      name: '秋水共长天一色#0986',
      value2:'TA还什么都没有留下～TA还…',
      show: false,
      actions: [
        {
          name: '拍摄',type: 1
        },
        {
          name: '从手机相册选择',type: 2
        },
    ]
    }
  },
  methods: {
    logout() {
      this.$router.push({name: 'login'})
    },
   onSelect(item){
      console.log(item)
      this.show = false
      if(item.type==1) {
      }
    },
    toCancel(){
      console.log('点击了取消');
    }
  },
  mounted() {
    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scope>
.personal {
  padding-top: 50px;
  .van-icon-arrow {
    font-size: 16px;
    color: #969799;
  }
  .van-cell-group {
    .van-cell,.van-field__label {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
    }
    .van-field__control{
      font-size: 13px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
    }
  }

  .avtar {
    position: relative;
    overflow: initial;
    z-index: 999;
    .van-cell__value {
     overflow: initial;
    }
    .van-images{
      width: 40px;
      height: 40px;
      position: absolute;
      top: 50%;
      margin-top: -20px;
      right: 30px;
      z-index: 999;
      background: olivedrab;
      border-radius: 50px;
      overflow: hidden;
      .van-image {
        width: 100%;
        height: 100%;
      }
    }
  }
 .fanModel.van-popup--bottom.van-popup--round {
      border-radius: 6px 6px 0 0;
  }
  .fanModel {
    .van-action-sheet__item,.van-action-sheet__cancel {
      font-size: 15px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #000000;
    }
    .van-action-sheet__content .van-action-sheet__item:nth-child(1) {
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
  }

}
</style>
